<template>
  <view class="chart">
    <view class="title" style="font-weight: bold">今日订单金额</view>
    <animate-number
      ref="now"
      class="price"
      :from="0"
      :to="vk.pubfn.priceFilter(sumToday)"
      duration="1000"
      easing="easeOutQuad"
      :formatter="formatter"
      :key="vk.pubfn.priceFilter(sumToday)"
    />
    <!-- <view class="price">{{ vk.pubfn.priceFilter(sumToday) }}</view> -->
    <view id="getOrderCount" class="real"></view>
  </view>
</template>

<script>
var vk = uni.vk;
import * as echarts from "echarts";

export default {
  name: "getOrderCount",
  data() {
    return {
      sumToday: 0,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    per(a, b) {
      if (a == 0 && b == 0) return 0;
      if (a == 0) return -100;
      if (b == 0) return 100;
      return (((a - b) / b) * 100).toFixed(2);
    },
    async init() {
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.getOrderCount",
      });
      this.sumToday = res.sumToday;
      let xList = [];
      let yList = [];
      let yList2 = [];
      res.list1.forEach((item) => {
        xList.push(item.text);
        yList.push(item.value);
      });
      res.list2.forEach((item) => {
        yList2.push(item.value);
      });

      // 渲染图表
      let myChart = echarts.getInstanceByDom(
        document.getElementById("getOrderCount")
      );
      if (myChart == null) {
        // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById("getOrderCount"));
      }
      let option = {
        title: { show: false },
        backgroundColor: "#ffffff",
        grid: {
          left: "0",
          right: "3%",
          top: "18%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: { trigger: "axis" },
        legend: { x: "left", data: ["今日", "昨日"] },
        xAxis: [
          {
            type: "category",
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            data: xList,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            axisLabel: { show: false },
            splitLine: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: "昨日",
            type: "line",
            symbol: "none",
            smooth: true,
            lineStyle: { normal: { color: "#D1D1D1" } },
            itemStyle: { color: "#D1D1D1" },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "rgba(209, 209, 209, 0.3)" },
                    { offset: 1, color: "rgba(209, 209, 209, 0)" },
                  ],
                  false
                ),
                shadowColor: "rgba(64, 158, 255, 0.9)",
                shadowBlur: 20,
              },
            },
            data: yList2,
          },
          {
            name: "今日",
            type: "line",
            symbol: "none",
            smooth: true,
            lineStyle: { normal: { color: "#2d8cf0" } },
            itemStyle: { color: "#2d8cf0" },
            data: yList,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/pages/stats/common/css/index.scss";

.chart {
  flex: 1;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.price {
  font-size: 20px;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  padding: 10px 0;
}
.price::before {
  content: "¥ ";
  font-size: 13px;
}

.real {
  width: 100%;
  height: 190px;
}
</style>
